<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="mini" icon="el-icon-search" @click="SearchClick">搜 索</el-button>
        <el-button type="warning" size="mini" @click="ResetClick" icon="el-icon-s-promotion">重 置</el-button>
      </div>
      <div class="tb-body">
        <el-form ref="searchFormRef" :model="searchForm" :inline="true" label-width="120px" :style="`flex:1;`">
          <el-form-item label="单号" prop="No">
            <el-input v-model.trim="searchForm.No" placeholder="请输入单号" :clearable="true"></el-input>
          </el-form-item>
          <el-form-item label="盘点人">
            <SigleSelect url="/User/List" columnName="Name" :clearable="true" columnValue="Id"
                         v-model="searchForm.CheckUserId">
            </SigleSelect>
          </el-form-item>

          <el-form-item label="货主">
            <SigleSelect url="/Customer/List" columnName="OwnerName" :clearable="true" columnValue="Id"
                         v-model="searchForm.CustomerId" :where="{ WarehouseId: CurrentWarehouseId }">
            </SigleSelect>
          </el-form-item>
          <el-form-item label="执行库存调整">
            <el-select v-model="searchForm.IsExcuteInventoryChange" :clearable="true"
                       placeholder="请选择是否执行库存调整">
              <el-option key="true" label="是" value="true">
              </el-option>
              <el-option key="false" label="否" value="false">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="盘点时间">
            <el-date-picker v-model="searchForm.CheckTimeRange" type="datetimerange"
                            start-placeholder="开始盘点时间" end-placeholder="结束盘点时间" :default-time="['00:00:00']"
                            value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>

    </el-card>


    <el-dialog :title="formData.Id ? '修改盘点单' : '添加盘点单'" :visible.sync="editorShow" width="50%"
               :lock-scroll="true"
               height="800px">
      <el-form v-if="editorShow == true" ref="editModalForm" :rules="editModalFormRules" :model="formData"
               label-width="140px" size="mini">
        <el-row :gutter="10" class="EditFromBody" style="max-height: 600px;overflow-y: scroll">
          <el-col :span="24">
            <el-form-item label="单号" prop="No">
              <el-input type="text" v-model.trim="formData.No" placeholder="请输入单号"
                        :clearable="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="货主" prop="CustomerId">
              <SigleSelect url="/Customer/List" columnName="OwnerName" columnValue="Id"
                           v-model="formData.CustomerId" :where="{ WarehouseId: CurrentWarehouseId }">
              </SigleSelect>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="盘点时间" prop="CheckTimeRange">
              <el-date-picker v-model="formData.CheckTimeRange" align="right" type="datetimerange"
                              range-separator="-" start-placeholder="开始盘点时间" end-placeholder="结束盘点时间"
                              placeholder="选择"
                              value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row type="flex" justify="end" align="bottom">
          <el-form-item>
            <el-button type="primary" plain @click="CreateOrEditForm()">确 定</el-button>
            <el-button @click="editorShow = false">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>

    </el-dialog>


    <PaginationTable ref="PaginationTableId" url="/InventoryCheck/List" :column="dataColum" :where="where">
      <template v-slot:header>
        <el-button type="primary" size="mini" plain icon="el-icon-edit" @click="ShowEditModal()">新 增</el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="ShowBatchDeleteModal()">批 量 删
          除
        </el-button>
      </template>
      <template v-slot:Operate="scope">
        <el-button class="margin-top-xs" type="primary" v-if="scope.row.InventoryCheckStatus != 3" size="mini"
                   @click="ShowEditModal(scope.row.Id)">修
          改
        </el-button>
        <el-button class="margin-top-xs" type="success" size="mini" @click="ToInventoryCheckDetList(scope.row)">
          盘点明细
        </el-button>
        <el-button class="margin-top-xs" v-if="scope.row.InventoryCheckStatus == 2" type="warning" size="mini"
                   @click="Completed(scope.row.Id)">盘点完成
        </el-button>
        <el-button class="margin-top-xs"
                   v-if="scope.row.InventoryCheckStatus == 3 && scope.row.IsExcuteInventoryChange != true"
                   type="warning" size="mini" @click="CompletedStockChange(scope.row.Id)">完成库存调整
        </el-button>
        <el-button class="margin-top-xs" type="danger" v-if="scope.row.InventoryCheckStatus != 3" size="mini"
                   @click="ShowDeleteModal(scope.row.Id)">删
          除
        </el-button>
      </template>
    </PaginationTable>
  </div>
</template>

<script>
import store from '@/store';
import {mapGetters} from 'vuex';

export default {
  name: "InventoryCheckList",
  computed: {
    ...mapGetters([
      'Token', 'UserInfo', 'RoleType', 'HasUserInfo', 'ColumnType', "UserId", 'CurrentWarehouseId'
    ])
  },
  data() {

    return {
      where: {},
      searchForm: {},//搜索定义的数据对象
      dataColum: [
        {
          key: "Id",
          hidden: true,

        },
        {
          key: "No",
          title: "单号",
          width: "160px",

          type: store.getters.ColumnType.SHORTTEXT,
        },
        {
          key: "CheckUserId",
          hidden: true,
        },
        {
          key: "CheckUserDto.Name",
          title: "盘点人",
          width: "160px",

          type: store.getters.ColumnType.SHORTTEXT,
        },
        {
          key: "WarehouseId",
          hidden: true,
        },
        {
          key: "WarehouseDto.Name",
          title: "仓库名称",
          width: "160px",

          type: store.getters.ColumnType.SHORTTEXT,
        },
        {
          key: "CustomerId",
          hidden: true,
        },
        {
          key: "CustomerDto.OwnerName",
          title: "货主",
          width: "160px",

          type: store.getters.ColumnType.SHORTTEXT,
        },
        {
          key: "InventoryCheckStatus",
          hidden: true,
        },

        {
          key: "InventoryCheckStatusFormat",
          title: "盘点状态",


          type: store.getters.ColumnType.SHORTTEXT,
        },
        {
          key: "IsExcuteInventoryChange",
          title: "是否执行库存调整",


          type: store.getters.ColumnType.JUDGMENTTAG,
        },
        {
          key: "CheckTime",
          title: "盘点时间",

          type: store.getters.ColumnType.SHORTTEXT,
          template: function (item, index) {
            return `${item.BeginCheckTime}至${item.EndCheckTime}`
          }
        },
        {
          title: "操作",
          width: "300px",
          key: "Operate",
          type: store.getters.ColumnType.USERDEFINED,
        },
      ],
      editModalFormRules: {
        "No": [
          {required: true, message: '该项为必填项', trigger: 'blur'},
        ],
        "CheckUserId": [
          {required: true, message: '该项为必填项', trigger: 'blur'},
        ],
        "WarehouseId": [
          {required: true, message: '该项为必填项', trigger: 'blur'},
        ],
        "CustomerId": [
          {required: true, message: '该项为必填项', trigger: 'blur'},
        ],
        "CheckTimeRange": [
          {required: true, message: '该项为必填项', trigger: 'blur'},
        ],
        "IsExcuteInventoryChange": [
          {required: true, message: '该项为必填项', trigger: 'blur'},
        ],
        "InventoryCheckStatus": [
          {required: true, message: '该项为必填项', trigger: 'blur'},
        ],
      },
      formData: {},//保存或者修改定义的数据对象
      editorShow: false,

    };
  },
  created() {
    this.where.WarehouseId = this.CurrentWarehouseId;
  },
  methods: {
    async ToInventoryCheckDetList(row) {
      this.$router.push({
        path: '/Admin/InventoryCheckDetList',
        query: {
          InventoryCheckId: row.Id,
          CustomerId: row.CustomerId,
          InventoryCheckStatus: row.InventoryCheckStatus,
        }
      });
    },
    //盘点完成
    async Completed(Id) {
      let {Data} = await this.$PostSigleUpdate(`/InventoryCheck/Get`, `/InventoryCheck/Completed`, Id, '你确定盘点完成了吗?', {});

      this.$refs.PaginationTableId.Reload(this.searchForm);
    },
    //完成库存调整
    async CompletedStockChange(Id) {
      let {Data} = await this.$PostSigleUpdate(`/InventoryCheck/Get`, `/InventoryCheck/CompletedStockChange`, Id, '你确定完成库存调整吗?', {});

      this.$refs.PaginationTableId.Reload(this.searchForm);
    },
    /**
     * 点击新增或者编辑的时候会触发
     */
    async ShowEditModal(Id) {

      let {Data} = await this.$Post(`/InventoryCheck/Get`, {Id: Id});
      if (!Id) {
        Data.WarehouseId = this.CurrentWarehouseId;
        Data.CheckUserId = this.UserId;
        Data.InventoryCheckStatus = 1;
        Data.IsExcuteInventoryChange = false;
      }
      if (Data.BeginCheckTime && Data.EndCheckTime) {
        Data.CheckTimeRange = [Data.BeginCheckTime, Data.EndCheckTime];
      }
      this.formData = Data;

      this.editorShow = true;

    },
    /**
     * 点击保存的时候会触发
     */
    async CreateOrEditForm() {

      this.$refs.editModalForm.validate(async valid => {
        if (valid) {
          this.formData.BeginCheckTime = this.formData.CheckTimeRange[0];
          this.formData.EndCheckTime = this.formData.CheckTimeRange[1];
          var {Success} = await this.$Post(`/InventoryCheck/CreateOrEdit`, this.formData);

          if (Success) {
            this.editorShow = false;
            this.$refs.PaginationTableId.Reload(this.searchForm);
          }
        }
      })
    },
    /**
     * 单个删除的时候会触发
     */
    async ShowDeleteModal(Id) {
      await this.$PostDelete(`/InventoryCheck/Delete`, {Id: Id});
      this.$refs.PaginationTableId.Reload(this.searchForm);
    },
    /**
     * 批量删除的时候会触发
     */
    async ShowBatchDeleteModal() {
      var ids = this.$refs.PaginationTableId.GetSelectionRow().map(x => x.Id);
      if (ids.length == 0) {
        this.$message.error("你选择需要删除的记录");
        return;
      }
      await this.$PostDelete(`/InventoryCheck/BatchDelete`, {Ids: ids});

      this.$refs.PaginationTableId.Reload(this.searchForm);
    },
    /**
     * 点击表格搜索按钮会触发
     */
    async SearchClick() {
      this.$refs.PaginationTableId.Reload(this.searchForm);
    },
    /**
     * 点击清空表单会触发
     */
    async ResetClick() {
      this.searchForm = {};
      this.$refs.PaginationTableId.Reload(this.searchForm);
    },


  },
};
</script>